<template>
  <div class="search-result">
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="加载失败,请点击重试"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
       v-for="(result,index) in list" 
       :key="index" 
       :title="result.title" />
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from "@/api/search";
export default {
  props: {
    searchText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page:1,
      per_page:20,
      error:false

    };
  },
  methods: {
   async onLoad() {
     try{
        const {data}=await getSearchResult({
        page:this.page,
        per_page:this.per_page,
        q:this.searchText
      })
      // 人为模拟加载失败的情况
      if(Math.random()>0.8){
        JSON.parse('asdfhj')
      }
      console.log(data)
      // 将获取到的数据放进数组List
      const {results}=data.data
      this.list.push(...results)
      // 将本次加载的Loading关闭，结束本次加载，开始本次加载vant组件默认由用户滑动触发
      this.loading=false
      // 判断是否还有数据
      if(results.length){
        this.page++
      }{
        // 如果没有数据，表示加载完毕
        this.finished=true
      }
     }catch(err){
       console.log(err)
      //  显示加载失败的状态
      this.error=true
      // 加载失败，本次加载失败也要关闭
      this.loading=false

     }
    },
  },
};
</script>

<style>
</style>